<template>
  <WidgetBase ref="root" :data="data">
    <TableMain :data="data" header-hideable :column-resizable="data.isSet" />
  </WidgetBase>
</template>

<script lang="ts">
import { defineComponent, onMounted, watch } from 'vue'
import { Widget } from '@/models'
import WidgetBase from '@/components/widget-base/WidgetBase.vue'
import TableMain from './table/TableMain.vue'

/** 表格 */
export default defineComponent({
  name: 'WidgetTable',

  components: { WidgetBase, TableMain },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    }
  },

  setup(props) {
    // 同步更新控件值/
    watch(
      () => props.data.tableValue,
      val => {
        const widget = props.data
        widget.value = widget.hasFillValue ? JSON.stringify(val) : ''
      },
      {
        immediate: true
      }
    )

    // 同步更新表格尺寸
    watch(
      () => JSON.stringify(props.data.tableSize),
      () => {
        const widget = props.data
        widget.updateTableSize()
        widget.adjust()
      },
      { immediate: true }
    )

    // 同步更新行数
    watch(
      () => props.data.tableRows,
      val => (props.data.tableOptions.rows = val),
      { immediate: true }
    )

    // 同步更新列数
    watch(
      () => props.data.tableCols,
      val => (props.data.tableOptions.cols = val),
      { immediate: true }
    )

    // 监听头部显示，裁剪适应
    watch(
      () => props.data.tableOptions.headerHidden,
      val => !val && props.data.tableAutoCrop(false)
    )

    // 挂载后裁剪以适应页面
    onMounted(() => {
      const widget = props.data

      widget.isSet && widget.tableAutoCrop()
    })

    return {}
  }
})
</script>

<style lang="scss">
.fa-widget-table {
  .fa-widget__box {
    width: auto !important;
    height: auto !important;
    border: none !important;

    .fa-widget__required {
      top: -14px;
    }
  }

  &.is-error-marked {
    .table.is-error {
      outline: 2px solid $color-danger;
      outline-offset: -1px;
    }

    .fa-widget__box {
      border: none !important;
    }
  }

  .table-cell {
    border-style: dashed;
  }

  .cell-input {
    font-size: inherit;
  }

  &.is-selecting,
  &.is-widget-active,
  &.widget-mode-done:not(:hover) {
    .table-cell {
      border-style: solid;
    }
  }

  // 完成模式
  &.widget-mode-done:not(:hover, .is-widget-active) {
    .table-cell {
      border-color: #c0c0c0 !important;
    }

    .header-cell {
      background-color: rgba(0, 0, 0, 0.04) !important;
    }
  }
}

// 参与方颜色样式
@each $c, $color in $actor-colors {
  .fa-widget-table.actor-#{$c} {
    .table-cell {
      border-color: rgba($color, 0.6);

      &.is-editing .cell-input {
        outline-color: $color;
      }
    }

    &:hover,
    &.is-selecting,
    &.is-widget-active {
      .table-cell {
        border-color: $color;
      }
    }

    .header-cell {
      background-color: rgba($color, 0.3);
    }

    .column-resizer__item.is-resizing .column-resizer__handle {
      border-color: $color;
    }

    .table-handle__button {
      &:hover {
        color: $color;
        background-color: mix($color, #fff, 10%);
      }

      &:focus-visible {
        outline-color: $color;
      }
    }
  }
}
</style>
